<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: #099;
        }
    </style>
</head>

<body>


    <div id="app2"></div>


    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="./vue3.js"></script>
    <script>
        const _Vue = Vue
        const {
            createVNode: _createVNode,
            createCommentVNode: _createCommentVNode,
            createTextVNode: _createTextVNode
        } = _Vue

        const _hoisted_1 = /*#__PURE__*/ _createTextVNode()
        const _hoisted_2 = /*#__PURE__*/ _createVNode("br", null, null, -1 /* HOISTED */ )
        const _hoisted_3 = /*#__PURE__*/ _createVNode("h4", null, "双向绑定", -1 /* HOISTED */ )
        const _hoisted_4 = /*#__PURE__*/ _createVNode("br", null, null, -1 /* HOISTED */ )
        const _hoisted_5 = /*#__PURE__*/ _createTextVNode(" --------------------------------")
        const _hoisted_6 = /*#__PURE__*/ _createVNode("br", null, null, -1 /* HOISTED */ )
        const _hoisted_7 = /*#__PURE__*/ _createVNode("h4", null, "列表渲染", -1 /* HOISTED */ )
        const _hoisted_8 = {
            key: 0
        }
        const _hoisted_9 = {
            key: 1
        }


        const app = {
            data() {
                return {
                    title: "hello vue!",
                    counter: '0',
                    date: '',
                    selectedCourse: '',
                    message: 'hi message!',
                    course: '',
                    courses: []
                }
            },
            mounted() {
                setTimeout(() => {
                    this.title = "new vue content!";
                    this.courses = ["初级web前端工程师", "中级数据分析工程师", "高级架构工程师"];
                }, 3000);

                setInterval(() => {
                    this.counter++;
                }, 1000);

                setInterval(() => {
                    this.date = new Date().toLocaleString();
                }, 1000);
            },
            methods: {
                reverseMessage() {
                    this.message = this.message.split('').reverse().join('');
                },
                addCourse() {
                    this.courses.push(this.course);
                    this.course = '';
                },


            },
            render(_ctx, _cache) {
                with(_ctx) {
                    const {
                        createVNode: _createVNode,
                        toDisplayString: _toDisplayString,
                        vModelText: _vModelText,
                        withKeys: _withKeys,
                        withDirectives: _withDirectives,
                        createCommentVNode: _createCommentVNode,
                        openBlock: _openBlock,
                        createBlock: _createBlock,
                        renderList: _renderList,
                        Fragment: _Fragment,
                        createTextVNode: _createTextVNode
                    } = _Vue

                    return (_openBlock(), _createBlock(_Fragment, null, [
                        _createVNode("span", {
                            title: message
                        }, "hi bind message", 8 /* PROPS */ , ["title"]),
                        _hoisted_1,
                        _hoisted_2,
                        _createTextVNode(" " + _toDisplayString(title) + ":counter is " +
                            _toDisplayString(counter) + " ", 1 /* TEXT */ ),
                        _createVNode("p", null, "now: " + _toDisplayString(date), 1 /* TEXT */ ),
                        _createVNode("div", null, _toDisplayString(message), 1 /* TEXT */ ),
                        _createVNode("button", {
                            onClick: reverseMessage
                        }, "reverse message", 8 /* PROPS */ , ["onClick"]),
                        _hoisted_3,
                        _withDirectives(_createVNode("input", {
                            "onUpdate:modelValue": $event => (course = $event),
                            onKeydown: _withKeys(addCourse, ["enter"]),
                            type: "text"
                        }, null, 40 /* PROPS, HYDRATE_EVENTS */ , ["onUpdate:modelValue",
                            "onKeydown"
                        ]), [
                            [_vModelText, course]
                        ]),
                        _createVNode("button", {
                            onClick: addCourse
                        }, "新增", 8 /* PROPS */ , ["onClick"]),
                        _hoisted_4,
                        _hoisted_5,
                        _hoisted_6,
                        _createCommentVNode(" 列表渲染 "),
                        _hoisted_7,
                        (courses.length == 0) ?
                        (_openBlock(), _createBlock("p", _hoisted_8, "没有任何课程")) :
                        (_openBlock(), _createBlock("ul", _hoisted_9, [
                            _createCommentVNode(
                                " <li v-for=\"c in courses\" :key=\"c\" :class=\"{active:(selectedCourse === c)}\" @click = \"selectedCourse = c\"> {{ c }}</li> "
                                ),
                            (_openBlock(true), _createBlock(_Fragment, null, _renderList(
                                courses, (c) => {
                                    return (_openBlock(), _createBlock("li", {
                                            key: c,
                                            style: {
                                                backgroundColor: (
                                                        selectedCourse === c
                                                        ) ? '#099' :
                                                    'transparent'
                                            },
                                            onClick: $event => (
                                                selectedCourse = c)
                                        }, _toDisplayString(c),
                                        13 /* TEXT, STYLE, PROPS */ , [
                                            "onClick"
                                        ]))
                                }), 128 /* KEYED_FRAGMENT */ ))
                        ]))
                    ], 64 /* STABLE_FRAGMENT */ ))
                }
            }
        };

        // Vue.createApp(app).mount('#app');
        // console.log(app.render);



        Vue.createApp(app).mount('#app2');
    </script>
</body>

</html>